<template>
  <view class="home">
    <headersss title='我的订单'></headersss>

    <!--搜索  -->

    <view class="splendid_search">
      <!-- <u-search :show-action='false' @focus='goSearch()'></u-search> -->
      <view class="search" @click='goSearch()'>
        <u-icon name="search" size="30"></u-icon>
        <view class="tt">
          请输入关键词
        </view>
      </view>

      <view class="sort">
        <view :class="flag ? 'active' : ''" @click="flag=true">活动订单
          <image v-if="flag" class="line1" src="../../static/imgs/Ellipse143.png" mode=""></image>
        </view>
        <view :class="flag ? '' : 'active'" @click="flag=false">赛事订单
          <image v-if="flag==false" class="line1" src="../../static/imgs/Ellipse143.png" mode=""></image>
        </view>
      </view>
    </view>

    <view class="line"></view>
    <!-- 活动订单  -->
    <view class="" v-if="flag">
      <view class="content" v-for="item in 6">
        <view class="dfk">长清大学生红叶谷汉服真人秀开团</view>
        <view class="content_center">
          <image src="../../static/imgs/Rectangle 548.png" mode=""></image>
          <view class="">
            <view class="item">项目内容：提供汉服一套、写真一组、提供汉服一套、写真一组、提供汉服一套、写真一组</view>
            <view class="number">人数：3人</view>
            <view class="time">下单时间：2023-7-12</view>
            <view class="price">
              <text class="price1">实付款 </text>
              <text class="price2">829.9 </text>
            </view>
          </view>
        </view>

        <view class="buttons">
          <button class="button1">申请退款</button>
          <button class="button2" @click="govouchers()">查看券码</button>
        </view>
      </view>
    </view>


    <!-- 赛事订单 -->
    <view class="competition" v-else v-for="item in 3">
      <view class="item">
        <view class="tag1" v-if="tag==1">退款中</view>
        <view class="tag3" v-else-if="tag==2">退款失败</view>
        <view class="tag2" v-else>已完成</view>
        <view class="title">长清大学生红叶谷汉服真人秀开团</view>
        <view class="name">姓名：徐佳</view>
        <view class="phone">电话：13994371114</view>
        <view class="category">报名类目：舞蹈</view>
        <view class="button">
          <button v-if="tag==1">退款中</button>
          <button v-if="tag==2">申请售后</button>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        keyword: '', // 搜索框输入
        flag: true, // 切换
        rightList: []
      };
    },
    methods: {
      goSearch() {
        uni.navigateTo({
          url: '/pages/search/search'
        })
      },
      govouchers() {
        uni.navigateTo({
          url: '/pages/vouchers/vouchers'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .u-icon-wrap {
    padding-left: 30rpx;
  }

  .search {
    width: 622rpx;
    height: 62rpx;
    background: #F2F2F2;
    border-radius: 74rpx 74rpx 74rpx 74rpx;
    display: flex;
    align-items: center;
    color: #949494;
    font-size: 24rpx;
    padding-left: 40rpx;

    .tt {
      margin-left: 10rpx;
    }
  }

  // 搜索
  .splendid_search {
    margin: 50rpx 32rpx;
    padding: 32rpx;
    position: absolute;
    top: 156rpx;
    width: 686rpx;
    height: 202rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(102, 102, 102, 0.1);
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    .sort {

      margin-top: 35rpx;
      display: flex;
      justify-content: space-around;
      font-size: 28rpx;

      .active {
        font-size: 28rpx;
        font-weight: bold;
        color: #FAD74E;
        position: relative;
        display: inline-block;

        .line1 {
          position: absolute;
          left: 35%;
          bottom: -15rpx;
          width: 38rpx;
          height: 8rpx;
        }
      }
    }
  }

  .line {
    margin-top: 110rpx;
  }

  .content {
    margin-top: 20rpx;
    margin-left: 32rpx;
    padding: 25rpx 32rpx;
    width: 686rpx;
    height: 352rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;




    .dfk {
      font-size: 28rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #333333;
    }

    .content_center {
      display: flex;
      margin-top: 16rpx;


      >image {
        margin-right: 20rpx;
        width: 160rpx;
        height: 160rpx;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
      }

      .item {
        width: 430rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #666666;

        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* 显示的行数 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .number {
        width: 432rpx;
        margin-top: 10rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #666666;
      }

      .time {
        margin-top: 10rpx;
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #666666;
      }

      .price {
        text-align: right;
        color: #C81A1A;
        font-weight: 700;

        .price1 {
          margin-right: 8rpx;
          color: #000000;
          font-size: 24rpx;
        }

        .price2 {}


      }

    }

    .buttons {
      width: 100%;
      margin-top: 20rpx;
      text-align: right;

      >button {
        display: inline-block;
        width: 158rpx;
        height: 48rpx;
        line-height: 47rpx;
        border-radius: 60rpx 60rpx 60rpx 60rpx;

        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;

      }

      .button1 {
        margin-right: 16rpx;
        color: #666666;
        background: #F3F3F3;

        &:after {
          border: none;
        }
      }

      .button2 {
        color: #FF6F04;
        background: #fff;
        border: 1rpx solid #FF6F04;
      }
    }
  }

  .competition {
    margin: 0 auto 20rpx;
    padding: 32rpx;
    width: 686rpx;
    // height: 324rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    .item {

      .tag1,
      .tag2,
      .tag3 {
        text-align: right;
        font-size: 24rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #F19250;

      }

      .tag2 {
        color: #5CC981;
      }

      .tag3 {
        color: #FF5151;
      }

      .title {
        font-size: 28rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #333333;
      }

      .name,
      .phone,
      .category {
        margin-top: 15rpx;
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
      }


      .button {
        width: 100%;
        text-align: right;

        >button {
          display: inline-block;
          // width: 150rpx;
          height: 48rpx;
          line-height: 48rpx;
          background: #F3F3F3;
          border-radius: 60rpx 60rpx 60rpx 60rpx;
          font-size: 24rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #666666;

          &:after {
            border: none;
          }
        }
      }
    }
  }
</style>